<template>
  <div class="tableAuto">

    <el-row :gutter="24">
      <!-- <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" style="padding:5px;">
        <div id="annular" ref="annular" style="height: 450px;"></div>
      </el-col> -->
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" style="padding:5px;">
        <el-table :data="tableData" style="width:100%" :height="height" @row-click="rowClick" border stripe
          :header-cell-style="{background:'#EAEBEC'}" v-loading="tableLoading" ref="refTable" highlight-current-row
          @sort-change='sortChange'>
          <el-table-column prop="level0" width="70" show-overflow-tooltip label="level_0"></el-table-column>
          <el-table-column prop="wll" width="110" show-overflow-tooltip label="喂料量"></el-table-column>
          <el-table-column prop="zdpl" width="110" show-overflow-tooltip label="振动频率"></el-table-column>
          <el-table-column prop="fengsu" width="90" show-overflow-tooltip label="风速"></el-table-column>

          <el-table-column prop="wendu" width="110" show-overflow-tooltip label="温度"></el-table-column>
          <el-table-column prop="sfhl" show-overflow-tooltip label="水分含量_预测"></el-table-column>
          <!--   <el-table-column prop="zdplfc" width="160" show-overflow-tooltip label="残差"></el-table-column>

      <el-table-column prop="cc" width="120" show-overflow-tooltip label="残差"></el-table-column>
      <el-table-column prop="pcc" width="120" show-overflow-tooltip label="皮尔逊差"></el-table-column>
      <el-table-column prop="wcc" width="120" show-overflow-tooltip label="W残差"></el-table-column> -->
        </el-table>
      </el-col>

    </el-row>
  </div>

</template>
<script>
import { annularEchar } from "../echarts.js"

export default {
  data () {
    return {
      radioId: "",
      height: document.body.offsetHeight - 210,
      tableData: [
        { 'level0': '0', 'wll': 3, 'zdpl': 11, 'fengsu': 21, 'wendu': 33, 'sfhl': 26, 'zdplfc': 980, 'cc': 74.5436, 'pcc': -101.464, 'wcc': 71.5436 },
        { 'level0': '1', 'wll': 3, 'zdpl': 10, 'fengsu': 21, 'wendu': 33, 'sfhl': 27, 'zdplfc': 970, 'cc': 72.1436, 'pcc': -91.464, 'wcc': 77.5436 },
        { 'level0': '2', 'wll': 3, 'zdpl': 12, 'fengsu': 21, 'wendu': 33, 'sfhl': 28, 'zdplfc': 960, 'cc': 71.2436, 'pcc': -93.464, 'wcc': 79.5436 },
        { 'level0': '3', 'wll': 3, 'zdpl': 11, 'fengsu': 21, 'wendu': 35, 'sfhl': 22, 'zdplfc': 998, 'cc': 75.7436, 'pcc': -891.464, 'wcc': 84.5436 },
        { 'level0': '4', 'wll': 3, 'zdpl': 11, 'fengsu': 25, 'wendu': 36, 'sfhl': 22, 'zdplfc': 997, 'cc': 65.5436, 'pcc': -91.464, 'wcc': 94.5436 },
        { 'level0': '5', 'wll': 3, 'zdpl': 11, 'fengsu': 26, 'wendu': 37, 'sfhl': 22, 'zdplfc': 996, 'cc': 87.5436, 'pcc': -78.464, 'wcc': 54.5436 },
        { 'level0': '6', 'wll': 3, 'zdpl': 11, 'fengsu': 21, 'wendu': 33, 'sfhl': 26, 'zdplfc': 980, 'cc': 74.5436, 'pcc': -101.464, 'wcc': 71.5436 },
        { 'level0': '7', 'wll': 3, 'zdpl': 10, 'fengsu': 21, 'wendu': 33, 'sfhl': 27, 'zdplfc': 970, 'cc': 72.1436, 'pcc': -91.464, 'wcc': 77.5436 },
        { 'level0': '8', 'wll': 3, 'zdpl': 12, 'fengsu': 21, 'wendu': 33, 'sfhl': 28, 'zdplfc': 960, 'cc': 71.2436, 'pcc': -93.464, 'wcc': 79.5436 },
        { 'level0': '9', 'wll': 3, 'zdpl': 11, 'fengsu': 21, 'wendu': 35, 'sfhl': 22, 'zdplfc': 998, 'cc': 75.7436, 'pcc': -891.464, 'wcc': 84.5436 },
        { 'level0': '10', 'wll': 3, 'zdpl': 11, 'fengsu': 25, 'wendu': 36, 'sfhl': 22, 'zdplfc': 997, 'cc': 65.5436, 'pcc': -91.464, 'wcc': 94.5436 },
        { 'level0': '11', 'wll': 3, 'zdpl': 11, 'fengsu': 26, 'wendu': 37, 'sfhl': 22, 'zdplfc': 996, 'cc': 87.5436, 'pcc': -78.464, 'wcc': 54.5436 },
        { 'level0': '12', 'wll': 3, 'zdpl': 11, 'fengsu': 26, 'wendu': 37, 'sfhl': 22, 'zdplfc': 996, 'cc': 87.5436, 'pcc': -78.464, 'wcc': 54.5436 },
      ],
      wrList: [{
        label: "读写",
        value: 0
      }, {
        label: "只读",
        value: 1
      }, {
        label: "只写",
        value: 2
      }],
    }
  },
  props: {
    // tableData: Array,
    // pager: Object,
    tableLoading: Boolean
  },
  mounted () {
    // this.tableData = [
    //   { 'level0': '', 'wll': 3, 'zdpl': 11, 'fengsu': 21, 'wendu': 33, 'sfhl': 22, 'zdplfc': 990 },
    //   { 'level0': '', 'wll': 3, 'zdpl': 11, 'fengsu': 21, 'wendu': 33, 'sfhl': 22, 'zdplfc': 990 },
    //   { 'level0': '', 'wll': 3, 'zdpl': 11, 'fengsu': 21, 'wendu': 33, 'sfhl': 22, 'zdplfc': 990 },
    //   { 'level0': '', 'wll': 3, 'zdpl': 11, 'fengsu': 21, 'wendu': 33, 'sfhl': 22, 'zdplfc': 990 },
    //   { 'level0': '', 'wll': 3, 'zdpl': 11, 'fengsu': 21, 'wendu': 33, 'sfhl': 22, 'zdplfc': 990 },
    //   { 'level0': '', 'wll': 3, 'zdpl': 11, 'fengsu': 21, 'wendu': 33, 'sfhl': 22, 'zdplfc': 990 },
    // ]

    this.myCharts1()
  },
  methods: {
    rowClick (row) {
      this.radioId = row.woId;
      let obj = {
        row: row,
        radioId: this.radioId,
      }
      this.$emit("handleEdit", obj)
      this.$refs.refTable.setCurrentRow(row);
    },
    sortChange (column) {
      this.$emit('sortChange', column)
    },
    table_index (index) {
      // return (this.pager.pageNum - 1) * this.pager.pageSize + index
    },
    getwrName (id) {
      if (!id && id !== 0) return ''
      return this.wrList.find(item => parseInt(item.value) == id).label
    },
    myCharts1 (annularData) {
      var dom = this.$refs.annular;
      var myChart = this.$echarts.init(dom);
      if (annularEchar(annularData) && typeof annularEchar(annularData) === "object") {
        myChart.setOption(annularEchar(annularData, this.$t('recipe.status_statistics')), true);
      }
      this.echartsResize(dom)
    },
    echartsResize (doc) {
      let sizeFun = () => {
        this.$echarts.init(doc).resize()
      }
      setTimeout(() => {
        window.addEventListener('resize', sizeFun)
      }, 100)
    },

  }
}
</script>
<style scoped>
.bai {
  color: #fff;
}
.tableAuto {
  margin-top: 10px;
}
</style>